<template>
  <div id="app">
    <div>
      <button @click="changeCop(true)">第一页</button>
      <button @click="changeCop(false)">第二页</button>
      <div class="box">
        <component :is="flag ? oneCop : twoCop"></component>
        <!-- <One></One> -->
      </div>


      <!-- 过渡动画 -->
      <button @click='aaaa = !aaaa'>按钮</button>
      <button @click='show = !show'>show按钮</button>
      <transition>
        <div v-show="aaaa" class="show-hide">
          111111111111112332312
        </div>
      </transition>
      
      <transition name="fade">
        <div class="slide-bar" v-show="show"></div>
      </transition>
      
    </div>

    <hr>
    <br><br><br><br>
    <button @click="ani('topToTop')">从顶部滑入，顶部滑出</button>
    <button @click="ani('topToBottom')">从顶部滑入，底部滑出</button>
    <button @click="ani('bottomToTop')">从底部滑入，顶部滑出</button>
    <button @click="ani('bottomToBottom')">从底部滑入，底部滑出</button>
    <button @click="ani('leftToRight')">从左部滑入，右部滑出</button>
    <button @click="ani('leftToLeft')">从左部滑入，左部滑出</button>
    <button @click="ani('rightToRight')">从右部滑入，右部滑出</button>
    <button @click="ani('rightToLeft')">从右部滑入，左部滑出</button>

    <div class="view-box">
      <!-- name:topToTop 
      .topToTop-enter-active
      .topToTop-leave-active
      -->
      <transition 
        :name="aniName"
        :appear="true"
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        @before-leave="beforeLeave"
        @leave="leave"
        @after-leave="afterLeave"
      >
        <div class="view-main" v-show="aniShow"></div>
      </transition>  
    </div>


  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</template>

<script>
import One from "./components/One.vue"
import Two from "./components/Two.vue"

export default {
  name: 'App',
  data() {
    return {
      oneCop:One,
      twoCop:Two,
      flag:false,
      aaaa:true,
      show:false,
      aniName:"", //topToTop
      aniShow:true
    }
  },
  methods:{
    changeCop(boo){
      this.flag = boo
    },
    ani(name){
      this.aniName = name
      this.aniShow = !this.aniShow
    },
    beforeEnter(el){
      console.log("动画进入前")
    },
    enter(el){
      console.log("动画已经进入")
    },
    afterEnter(el){
      console.log("动画进入之后")
      // alert("执行完毕")
    },
    beforeLeave(el){
      console.log("动画离开之前")
    },
    leave(el){
      console.log("动画离开时")
    },
    afterLeave(el){
      console.log("动画已经离开")
    }
  }
  // components:{
  //   One
  // }
}
</script>

<style lang="less">
  .box{
    width: 600px;
    height: 200px;
    border: 1px solid #ccc;
  }
  .show-hide{
    width: 600px;
    height: 100px;
    background: #ff0;
  }
  .v-enter,.v-leave-to{
    background: #f00;
    // display: none;
    // width: 0;
    height: 0;
  }
  .v-enter-to,.v-leave{
    background: #ff0;
    // display: block;
    // width: 600px;
    height: 100px;
  }
  .v-enter-active,.v-leave-active{
    transition: all 5s;
  }
  .slide-bar{
    width: 100px;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background: #999;
  }

  .fade-enter,.fade-leave-to{
    transform: translateX(-80%);
  }
  .fade-enter-active,.fade-leave-active{
    transition: 2s;
  }
  .fade-enter-to{
    transform: translateX(0);
  }

  .view-box{
    position: relative;
    width: 500px;
    height: 500px;
    background: #ccc;
    overflow: hidden;
    margin: 0 auto;
  }
  .view-main{
    position: absolute;
    height: 100%;
    width: 100%;
    background: green;
  }



  // 滑入---从顶部
  @keyframes slideInTop {
    0%{
      top: -100%;
    }
    100%{
      top:0;
    }
  }
// 滑入--- 从底部
  @keyframes slideInBottom {
    0% {
      top:100%;
    }
    100% {
      top:0;
    }
  }
  // 左侧滑入
  @keyframes slideInLeft {
    0% {
      left:-100%;
    }
    100%{
      left:0;
    }
  }
  // 右侧滑入
  @keyframes slideInRight {
    0% {
      left:100%;
    }
    100%{
      left:0;
    }
  }
  // 上侧滑出
  @keyframes slideOutTop {
    0% {
      top:0;
    }
    100%{
      top:-100%;
    }
  }
  // 底部滑出
   @keyframes slideOutBottom {
    0% {
      top:0;
    }
    100%{
      top:100%;
    }
  }
  // 左侧滑出
   @keyframes slideOutLeft {
    0% {
      left:0;
    }
    100%{
      left:-100%;
    }
  }
  // 右侧滑出
   @keyframes slideOutRight {
    0% {
      left:0;
    }
    100%{
      left:100%;
    }
  }

  // 顶部滑入顶部滑出
  .topToTop-enter-active{
    animation: slideInTop 2s;
  }
  .topToTop-leave-active{
    animation: slideOutTop 2s;
  }
  //顶部滑入底部滑出
  .topToBottom-enter-active{
    animation: slideInTop 2s;
  }
  .topToBottom-leave-active{
    animation: slideOutBottom 2s;
  }
  // 底部滑入顶部滑出
  .bottomToTop-enter-active{
    animation: slideInBottom 2s;
  }
  .bottomToTop-leave-active{
    animation: slideOutTop 2s;
  }
  // 底部滑入，底部滑出
  .bottomToBottom-enter-active{
    animation: slideInBottom 2s;
  }
  .bottomToBottom-leave-active{
    animation: slideOutBottom 2s;
  }
  // 左侧滑入右侧滑出
  .leftToRight-enter-active{
    animation: slideInLeft 2s;
  }
  .leftToRight-leave-active{
    animation: slideOutRight 2s;
  }
  // 左侧滑入左侧滑出
  .leftToLeft-enter-active{
    animation: slideInLeft 2s;
  }
   .leftToLeft-leave-active{
    animation: slideOutLeft 2s;
  }
  // 右侧滑入右侧滑出
  .rightToRight-enter-active{
    animation: slideInRight 2s;
  }
  .rightToRight-leave-active{
    animation: slideOutRight 2s;
  }
  // 右侧滑入左侧滑出
  .rightToLeft-enter-active{
    animation: slideInRight 2s;
  }
  .rightToLeft-leave-active{
    animation: slideOutLeft 2s;
  }

// top  顶部
// bottom 底部
// left 左侧
// right 右侧
// to  到哪
// sildeIn 滑入
// sildeOut 滑出

</style>
